<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
    <script src="../../js/jquery/jquery.js"></script>
</head>
<body>

<div id="app" >

    <a href="add.html">添加</a>

    <!--vue事件被触发后，会创建事件对象并赋值给$event变量 名称不可变-->
    <!--<ul>
        <li v-for="e in emps"/>
        {{e.id}}-{{e.name}}-{{e.age}}
    </ul>-->

    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>邮箱</th>
            <th>年龄</th>
            <th>管理员</th>
            <th>部门id</th>
            <th>操作</th>
        </tr>
        <tr v-for="e in emps">
            <td>{{e.id}}</td>
            <td>{{e.name}}</td>
            <td>{{e.password}}</td>
            <td>{{e.email}}</td>
            <td>{{e.age}}</td>
            <td>{{e.admin}}</td>
            <td>{{e.deptId}}</td>
            <td>
                <a v-bind:href="'edit.html?id='+e.id">编辑</a>
            </td>
        </tr>

    </table>


</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            emps:[]
        },
        mounted:function () {
            //console.log(this,1);        //当前在创建的vue实例
            //console.log(vue,2)          //还未初始化完成，此刻的vue是空对象，undefined

            //定义一个vue对象的this
            var _this = this;

            //发送异步请求去获取数据，模拟获取数据
            $.get("http://localhost:8080/employees/list",function (data) {
                //通过对象.属性的方法，进行数据的初始化
                _this.emps=data;
            })
        }
    })
    //console.log(vue,3);     //创建完成后的vue对象
</script>
</body>
</html>